<template>
	<view class="autReimbursement">
		<view class="autReimbursement-box">
		<navigator url="./myAddress">
		 <view class="op">
			<uni-icons color="#7FC9D1" size="20" type="plus"/>
			<text style="margin:4rpx 0 0 10rpx;">添加委托</text>
		 </view>
		</navigator>
		<view class="detail">
			<text>被委托人可以使用委托人的身份填写报销单并提报，并可以核销委托人的借款。</text>
		</view>
		<view class="center-list" >
		  <view class="center-item">
			<view class="item-left">
				<uni-icons color="#bbb" size="40" type="contact-filled" />
			</view>
			<view class="item-center">
				<view>张子建</view>
			</view>
			<view class="item-right">
				<text>解除委托</text>
			</view>
		 </view>
		</view>
	 </view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
	components: {
		uniIcons,
	},
	methods:{
	}
}
</script>

<style lang="scss" scoped>
.autReimbursement{
	position: relative;
 .autReimbursement-box{
	position: absolute;
	 top: 20rpx;
	 left: 0;
	 right: 0;
	 .op{
	 	background-color: #fff;
	 	text-align: center;
	 	color: #7FC9D1;
		line-height: 120rpx;
		height: 120rpx;
	 }
	 .detail{
		 color: #ccc;
		 font-size: 30rpx;
		 padding: 20rpx 10rpx;
	 }
	 .center-list{
	 	 background: #fff;
	 	.center-item{
	 	  display: flex;
	 	  justify-content: space-between;
	 	  line-height: 120rpx;
	 	  height: 120rpx;
	 	  border-bottom:1px solid #F9FAF9 ;
	 	   .item-left{
	 		  .svg-icon{
	 			  color:#7FC9D1;
	 			  font-size: 1.2em;
	 		  }
	 		  margin-left: 20rpx;
	 		  width: 10%; 
	 	   }
	 	  .item-center{
	 	  	width: 70%;
	 		margin-left: 20rpx;
	 	  }
	 	  .item-right{
	 		text-align: right;
			font-size: 34rpx;
			color:#E78484;
	 	  	width: 20%;
	 		margin-right: 10rpx;
	 	  }
	 	}
	 	}
 }
}
</style>
